<template>
  <el-scrollbar>
    <div class="demo-collapse">
      <el-collapse v-model="activeNames" @change="handleChange">
        <div>{{ title }}</div>

        <el-collapse-item title="基本特征" name="1">
          <div>{{ feature1 }}</div>
          <div>{{ feature2 }}</div>
          <div>{{ feature3 }}</div>
          <div>{{ feature4 }}</div>
          <div>{{ feature5 }}</div>
          <div>{{ feature6 }}</div>
          <div>{{ feature7 }}</div>
        </el-collapse-item>

        <el-collapse-item title="行为模式" name="2">
          <div>{{ behavior1 }}</div>
          <div>{{ behavior2 }}</div>
          <div>{{ behavior3 }}</div>
        </el-collapse-item>

        <el-collapse-item title="工作环境倾向性" name="3">
          <div>{{ trend1 }}</div>
          <div>{{ trend2 }}</div>
          <div>{{ trend3 }}</div>
          <div>{{ trend4 }}</div>
          <div>{{ trend5 }}</div>
          <div>{{ trend6 }}</div>
          <div>{{ trend7 }}</div>
        </el-collapse-item>

        <el-collapse-item title="潜在缺点" name="4">
          <div>{{ defect1 }}</div>
          <div>{{ defect2 }}</div>
          <div>{{ defect3 }}</div>
          <div>{{ defect4 }}</div>
        </el-collapse-item>

        <el-collapse-item title="发展建议" name="5">
          <div>{{ suggest1 }}</div>
          <div>{{ suggest2 }}</div>
          <div>{{ suggest3 }}</div>
          <div>{{ suggest4 }}</div>
          <div>{{ suggest5 }}</div>
          <div>{{ suggest6 }}</div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <el-row type="flex" justify="center">
      <el-col :span="1"> </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-form-item class="mb-4">
        <el-space :size="size" spacer="|">
          <el-button color="#626aef" type="primary" plain @click="this.$router.push('/INFP')">上一个</el-button>
          <el-button color="#626aef" type="primary" plain @click="this.$router.push('/ENFP')">看下一个</el-button>
        </el-space>
      </el-form-item>
    </el-row>
  </el-scrollbar>
</template>

<script>
import { ref } from 'vue'
import { ChatDotRound, ChatLineRound, ChatRound } from '@element-plus/icons-vue'
export default {
  name: 'index',
  data() {
    return {
      title: '',
      feature1: '',
      feature2: '',
      feature3: '',
      feature4: '',
      feature5: '',
      feature6: '',
      feature7: '',
      behavior1: '',
      behavior2: '',
      behavior3: '',
      trend1: '',
      trend2: '',
      trend3: '',
      trend4: '',
      trend5: '',
      trend6: '',
      trend7: '',
      defect1: '',
      defect2: '',
      defect3: '',
      defect4: '',
      suggest1: '',
      suggest2: '',
      suggest3: '',
      suggest4: '',
      suggest5: '',
      suggest6: '',
    }
  },
  methods: {},
  created() {
    const that = this
    this.$axios
      .get('/enfj')
      .then(function (response) {
        // 处理成功情况
        that.title = response['data']['enfj']
        that.feature1 = response['data']['feature1']
        that.feature2 = response['data']['feature2']
        that.feature3 = response['data']['feature3']
        that.feature4 = response['data']['feature4']
        that.feature5 = response['data']['feature5']
        that.feature6 = response['data']['feature6']
        that.feature7 = response['data']['feature7']
        that.behavior1 = response['data']['behavior1']
        that.behavior2 = response['data']['behavior2']
        that.behavior3 = response['data']['behavior3']
        that.trend1 = response['data']['trend1']
        that.trend2 = response['data']['trend2']
        that.trend3 = response['data']['trend3']
        that.trend4 = response['data']['trend4']
        that.trend5 = response['data']['trend5']
        that.trend6 = response['data']['trend6']
        that.trend7 = response['data']['trend7']
        that.defect1 = response['data']['defect1']
        that.defect2 = response['data']['defect2']
        that.defect3 = response['data']['defect3']
        that.defect4 = response['data']['defect4']
        that.suggest1 = response['data']['suggest1']
        that.suggest2 = response['data']['suggest2']
        that.suggest3 = response['data']['suggest3']
        that.suggest4 = response['data']['suggest4']
        that.suggest5 = response['data']['suggest5']
        that.suggest6 = response['data']['suggest6']
      })
      .catch(function (error) {
        // 处理错误情况
        console.log(error)
      })
      .then(function () {
        // 总是会执行
      })
  },
  setup() {
    const activeNames = ref([''])
    const value = ref()
    const icons = [ChatRound, ChatLineRound, ChatDotRound]
    return { activeNames, value, icons }
  },
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
</style>
